<template>
	<view class="app-login">
		<view class="login-title">
			你好，<br>
			欢迎来到伊姿漾
		</view>
		<view class="mode flex-box">
			<input type="text" v-model="refer_code" class="box-1" placeholder="请输入邀请码" />
			<!-- <u-icon name="scan" size="40" @tap="doScan"></u-icon> -->
		</view>
		<view class="mode flex-box">
			<input type="number" v-model="tel" class="box-1" maxlength="11" placeholder="请输入11位手机号" />
		</view>
		<view class="mode flex-box">
			<input type="text" v-model="auth_code" maxlength="6" class="box-1" placeholder="输入验证码" />
			<!-- <u-verification-code  :seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
			<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
				<text class="getcode" @tap="getAuthCode">{{code_text}}</text>
		</view>
		<!-- <view class="mode flex-box">
			<input type="password" v-model="pwd" class="box-1" placeholder="8到20位字母加数字组合" />
		</view>
		<view class="mode flex-box">
			<input type="password" v-model="pwd2" class="box-1" placeholder="确认登录密码" />
		</view> -->
		<view class="flex-box read" @tap="isRead = !isRead">
			<image :src="isRead?comm_img_url+'/check.png':comm_img_url+'/none-check.png'" class="check"></image>
			我已阅读并同意<text @tap.stop="userAgreement(1)">《用户服务协议》</text>与
			<text @tap.stop="userAgreement">《隐私政策》</text>
		</view>
		<button hover-class="none" class="btn" :disabled="is_loading" :loading="is_loading" @tap="sendReg">注册</button>
		<view class="flex-box btn-nav">
			<!-- #ifdef APP-PLUS -->
			<text @tap="$u.route({type:'navigateBack'})">立即登录</text>
			<!--#endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @tap="$u.route({url:'/pages/account/login'})">立即登录</text>
			<!--#endif -->
		</view>
	</view>
</template>

<script>
	// import app from "@/common/js/comm_url.js";
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				is_loading: false,
				isRead: false, //是否阅读
				refer_code: '',
				comm_img_url:'',
				tel: '',
				auth_code: '',
				pwd: '',
				pwd2: '',
				code_text:'获取验证码',
				info:{},
				seconds: 60,
			};
		},
		onLoad(option){
			this.comm_img_url = this.$c.appImg
			if(option.item){
				this.info = JSON.parse(decodeURIComponent(option.item))
			}
			
			 if(option.scene){
				 this.refer_code = option.scene
			 }
			 this.refer_code = uni.getStorageSync("code");
		},
		methods: {
			...mapMutations(['login']),
			userAgreement(index) {
				if(index ==1){
					uni.navigateTo({
						url:'/pages/web-view/web-view?url='+encodeURIComponent(JSON.stringify('https://suwen.dhlshu.cn/index/custom_service'))
					})
				}else{
					uni.navigateTo({
						url:'/pages/web-view/web-view?url='+encodeURIComponent(JSON.stringify('https://suwen.dhlshu.cn/index/custom_service'))
					})
				}
			},
			checkingNull() {
				if (!this.refer_code) {
					uni.showToast({
						icon: 'none',
						title: '请扫描或输入邀请码'
					})
					return false
				}
				if (!this.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入您的手机号码'
					})
					return false
				}
				if (!this.$u.test.mobile(this.tel)) {
					uni.showToast({
						icon: 'none',
						title: '您输入的手机号码有误'
					})
					return false
				}
				if (!this.auth_code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				if (!this.$u.test.code(this.auth_code, 6)) {
					uni.showToast({
						icon: 'none',
						title: '验证码有误'
					})
					return false
				}
				// if (!this.pwd) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请设置登录密码'
				// 	})
				// 	return false
				// }
				// if (!/^(?![0-9]*$)[a-zA-Z0-9\W]{8,20}$/.test(this.pwd)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '登录密码过于简单'
				// 	})
				// 	return false;
				// }
				// if (!this.pwd2) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请确认登录密码'
				// 	})
				// 	return false;
				// }
				// if (this.pwd != this.pwd2) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '两次登录密码不一致'
				// 	})
				// 	return false;
				// }
				return true
			},
			doScan() {
				uni.scanCode({
					success: res => {
						var url = res.result;
						var reg = new RegExp("/\?code=([^&]*)(&|$)", "i");
						var r = url.match(reg);
						if (r != null) {
							this.refer_code = r[1];
						} else {
							uni.showToast({
								title: '无法识别推荐码',
								icon: 'none'
							})
						}
					}
				});
			},
			getAuthCode(){
				if(!this.tel){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$u.api.smsCode({flag:'reg',tel:this.tel})
					.then(res => {
						if(res.status){
							this.$refs.uCode.start();
							return
						}
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					})
					.catch(err=>{
						console.log(err);
						
					})
				}
			},
			codeChange(text) {
				this.code_text = text;
			},
			sendReg() {
				if (!this.checkingNull()) return
				if (!this.isRead) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选《用户服务协议》'
					})
					return
				}
				let data = {
					refer_code: this.refer_code.trim(),
					tel: this.tel.trim(),
					auth_code: this.auth_code.trim(),
					// pwd: this.pwd.trim()
				}
				this.is_loading = true
				if(this.info.unionid){
					var pama = Object.assign(this.info,data)
					this.$u.api.bindReg(pama)
					.then(res=>{
						this.is_loading = false
						if(res.status){
							uni.showToast({
								icon: 'none',
								title: res.msg,
								mask:true
							})
							uni.setStorageSync('token', res.msg.token);
							uni.setStorageSync('userInfo', res.msg.userinfo);
							this.login()
							setTimeout(()=>{
								uni.switchTab({
									url: "/pages/converge/converge"
								});
							},1500)
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
					.catch(err=>{
						this.is_loading = false
						console.log(err)
					})
				}else{
					this.$u.api.doReg(data)
					.then(res => {
						this.is_loading = false
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						if (res.status) {
							uni.$emit('init_tel',this.tel);
							setTimeout(()=>{
								uni.navigateBack();
							},1000);
						}
					})
					.catch(err => {
						this.is_loading = false
						console.log(err.data);
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				}
			}
			
		}
	}
</script>

<style lang="less">
	// @import url('@/common/css/comm.less');

	page {
		background:#fff;
		.btn {
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(to right,#e9d2fa,#be8ff0);
			color: #fff;
			border-radius: 50rpx;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			margin:30rpx auto;
		}
	}

	.app-login {
		padding: 30rpx;

		// button {
		// 	margin: 100rpx auto 0;
		// }

		.read {
			font-size:26rpx;
			padding: 30rpx 0;

			.check {
				width: 28rpx;
				height: 28rpx;
				margin: 0;
				margin-right: 10rpx;
			}

			text {
				
			}

		}

		.mode {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEEEEE;

			.getcode {
				min-width: 160rpx;
				text-align: center;
				border-left: 1px solid #EEEEEE;
				padding-left: 20rpx;
				
			}
		}

		.login-title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 50rpx;
		}
	}
	.btn-nav {
		padding: 40rpx 0;
		justify-content: center;
		font-size: 30rpx;
	}

</style>
